<template>
	<view class="bind-mobile">
		<view class="title">绑定手机号</view>
		<view class="content">
			<view class="c-item">
				<view class="c-item-title">手机号</view>
				<input class="c-item-input" v-model="dataObj.mobile" placeholder="请输入手机号" />
			</view>
			<view class="c-item verification">
				<view class="c-item-title">验证码</view>
				<input class="c-item-input" v-model="dataObj.code" placeholder="请输入验证码" />
				<view class="verification-btn" @click="onGetVerificationTap">{{minute < 60 ? '倒计时' + minute + '秒' : '获取验证码'}}</view>
			</view>
		</view>
		<view class="post-btn" @click="onConfirmTap">确定</view>
	</view>
</template>

<script>
	import { requestErrorTip, checkMobileReg, handleToken, registExam } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				minute: 60,
				dataObj: {
					wxUserId: '', // 微信用户id
					mobile: '', // 手机号码
					code: '' // 验证码
				}
			}
		},
		onLoad(event) {
			this.dataObj['wxUserId'] = event['wxUserId'] || ''; // 获取微信用户id
		},
		methods: {
			// 获取验证码
			onGetVerificationTap() {
				if (this.minute < 60) {
					requestErrorTip('toast', '倒计时结束后才能重新获取新的验证码');
					return false;
				}
				this.countDown();
				this.checkField('', () => {
					this.$Requset({
						url: this.$Api['account']['verification'],
						data: {
							mobile: this.dataObj['mobile'],
							code: this.dataObj['wxUserId'] ? 'login' : 'veri' // reg：注册；login：登录；veri：手机修改；
						},
						method: 'post',
						success: (res) => {
							requestErrorTip('toast', '验证码获取成功');
						},
						fail: (err) => {
							requestErrorTip('toast', '验证码获取失败，请重新获取');
						}
					});
				});
			},
			countDown() {
				const that = this;
				that.minute--;
				if (that.minute) {
					setTimeout(() => {
						that.countDown();
					}, 1000);
				} else {
					that.minute = 60;
				}
			},
			// 提交修改绑定手机号码
			onConfirmTap() {
				this.checkField('post', () => {
					if (this.dataObj['wxUserId']) {
						// 微信绑定手机
						this.postBindMobile();
					} else {
						// 手机号码登录
						this.postChangeMobile();
					}
				});
			},
			// 提交绑定手机号码
			postBindMobile() {
				this.$Requset({
					url: this.$Api['account']['bingMobile'],
					data: {
						mobile: this.dataObj['mobile'],
						code: this.dataObj['code'],
						user_wx_id: this.dataObj['wxUserId']
					},
					method: 'post',
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						handleToken(data, this.dataObj['mobile']);
						// 注册手机号码(考试系统)
						registExam(this.dataObj['mobile']);
					},
					fail: (err) => {
						requestErrorTip('toast', '绑定手机号码失败，请重新提交');
					}
				});
			},
			// 提交修改绑定手机号码
			postChangeMobile() {
				this.$Requset({
					url: this.$Api['account']['changeMobile'],
					data: {
						mobile: this.dataObj['mobile'],
						code: this.dataObj['code']
					},
					method: 'post',
					success: (res) => {
						requestErrorTip('toast', '修改手机号码成功');
						// 清除token
						uni.removeStorageSync('token');
						// 清除用户信息
						uni.removeStorageSync('userInfo');
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/account/login'
							});
						}, 1000);
					},
					fail: (err) => {
						requestErrorTip('toast', '修改手机号码失败，请重新提交');
					}
				});
			},
			checkField(type, cb) {
				const data = this.dataObj;
				if (data['mobile'] === '') {
					requestErrorTip('toast', '请输入手机号');
					return false;
				}
				if (!checkMobileReg(data['mobile'])) {
					requestErrorTip('toast', '请输入正确的手机号');
					return false;
				}
				if (type === 'post' && data['verification'] === '') {
					requestErrorTip('toast', '请输入验证码');
					return false;
				}
				cb && cb();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.bind-mobile{
		padding: 54rpx 50rpx;
		.title{
			line-height: 56rpx;
			font-size: 40rpx;
			color: #1A1A1A;
			margin-bottom: 54rpx;
		}
		.content{
			margin-bottom: 44rpx;
			.c-item{
				position: relative;
				height: 80rpx;
				border: 1rpx solid #EAEFF1;
				border-radius: 40rpx;
				padding-left: 162rpx;
				margin-bottom: 22rpx;
				&-title{
					position: absolute;
					top: 0;
					left: 0;
					width: 162rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					color: #373737;
					text-align: center;
				}
				&-input{
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					color: #373737;
				}
			}
			.verification{
				padding-right: 200rpx;
				.verification-btn{
					position: absolute;
					top: 0;
					right: 0;
					width: 180rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					color: $color-common;
				}
			}
		}
		.post-btn{
			height: 82rpx;
			line-height: 82rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			border-radius: 41rpx;
			background-color: $color-common;
			margin-bottom: 24rpx;
		}
	}
</style>
